<template>
  <el-row class="csearch" type="flex" justify="center">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              @focus="focus"
              @blur="blur"
              @keyup.enter.native="searchHandler"
              v-model="search"
              class="input"
              style="border-radius: 0px"
            ></el-input>
         
          <!-- <el-button type="success" class="cbtn-bg" @click="searchHandler">开始找房</el-button> -->  
          <el-card
          @mouseenter="enterSearchBoxHanlder"
          v-if="isSearch"
          class="box-card"
          id="search-box"
          style="height:400px;overflow:auto;z-index:999; position:absolute;width:600px"
          
          >

          <dl v-if="hotSearchList.length!=0">
             
            <dt class="search-title">当前热门搜索</dt>
            <el-tag
              v-for="search in hotSearchList"
              :key="search.id"
              @click="rHandler(search)"
              style="margin-right:5px; margin-bottom:5px;"
            >{{search}}</el-tag>


          </dl>
          <dl v-if="isSearchList">

            <el-row style="width:100%">
        <el-col style="width:85%;float:left">
          <el-row
            :gutter="20"
            style="height: 200px;padding-top:20px;cursor:pointer;"
            v-for="item in searchList"
            :key="item.id"
          @click.native="info(item.id)">
            <el-col style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="'http://image.haoke.com/images/2021/'+ item.image" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
            <el-col>
              <el-row class="crow">
                <span class="house-title" v-html="item.title"></span>
              </el-row>
              <el-row class="crow">
        
                <!-- <span>面积：{{item.coveredArea}}㎡|</span> -->
                <span>{{item.orientation}}|</span>
                <span>{{item.floor}}|</span>
              </el-row>

              <el-row class="crow">
        
                <!-- <span>面积：{{item.coveredArea}}㎡|</span> -->
                <span style="color:red;font-weight: bold;font-size: 14px">{{item.rent}}|</span>
                <span>{{item.houseType}}|</span>
              </el-row>
          
            </el-col>
            <!-- <el-col :span="4" style="height: 100%;">
              <span style="color:red;font-weight: bold;font-size: 14px">{{item.rent}}元</span>
          
            </el-col> -->
          </el-row>
        </el-col>
        <!-- <el-col style="width:10%;float:right">
          <el-button type="primary" class="cbtn">试试地图找房</el-button>
        </el-col> -->
      </el-row>
          
          
          </dl>
        <el-pagination
        @size-change="searchHandler"
        @current-change="searchHandler"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
          </el-card>
    </el-col>

           <el-button type="success" class="cbtn-bg" @click="searchHandler">开始找房</el-button>
  </el-row>
</template>

<script>
import searchApi from "@/api/search";
export default {

name:'search',

  data() {
    return {
      search: "", //当前输入框的值
      isFocus: false, //是否聚焦
      hotSearchList: [], //热门搜索数据
    
      searchList: [], //搜索返回数据,
      total: 0, // 总记录数
      currentPage: 1, // 当前页
      pageSize: 10, // 每页大小

    };
  },
   computed: {
    isHistorySearch() {
      return this.isFocus && !this.search;
    },
    isSearchList() {
      return this.isFocus && this.search;
    },
    isSearch() {
      return this.isFocus;
    }
  },

  methods: {
    info(id) {
        this.$router.push('/tool/index/'+id)
    },
    searchHandler(){
       searchApi.search(this.currentPage,this.search).then(response => {


          this.searchList=response.list;
          if(response.hotWord!=null){
            this.hotSearchList=response.hotWord;
          }
      
          // console.log(response.hotWord);
          // console.log(this.hotSearchList);
          this.total=response.totalPage;


       })
    },
     rHandler(search) {
       this.search=search;
       
       
     searchApi.search(this.currentPage,this.search).then(response => {


          this.searchList=response.list;
           if(response.hotWord!=null){
            this.hotSearchList=response.hotWord;
          }
      
          this.total=response.totalPage;


       })
    },

    focus() {
      this.isFocus = true;
      
    },
     blur() {
      var self = this;
      this.searchBoxTimeout = setTimeout(function() {
        self.isFocus = false;
      }, 300);
    },
    enterSearchBoxHanlder() {
      clearTimeout(this.searchBoxTimeout);
    },
}
};
</script>

<style>

.search-title {
  color: #bdbaba;
  font-size: 15px;
  margin-bottom: 5px;
}
.house-title >>> em{
    font-style: normal;
    color: blue;
}



.csearch {
  width: 100%;
}
.cbtn-bg {
  background: #00ae66;
  border: none;
  border-radius: 0px;
}




</style>